

class BigScreen {

    // 默认配置
    defaultProps = {
        baseWidth: 1920,
        baseHeight: 1080,
        scaleCoeff: 0,
        useZoom: false, // 使用zoom模式缩放
        transition: 0, // 过渡时间，默认是 0
        scaleBaseOn: 'auto', // 缩放模式，新增参数，可选值 'width'（基于宽度缩放，自动缩放宽度至窗口宽度，高度自适应内容益处会出现滚动条）、'height'（基于高度缩放，自动缩放高度至窗口高度，宽度自适应内容益处会出现滚动条）、'auto' 表示自动计算宽高比适配
        resizeAuto: true, // 是否开启自动适配
        resizeDelay: 100, // resize 事件触发后延迟时间
    };

    constructor(props) {
        const { el, baseWidth, baseHeight, scaleCoeff, useZoom, scaleBaseOn, resizeAuto, resizeDelay } = { ...this.defaultProps, ...props };
        this.el = el;
        this.scaleCoeff = scaleCoeff;
        this.baseWidth = baseWidth;
        this.baseHeight = baseHeight;
        this.useZoom = useZoom;
        this.scaleBaseOn = scaleBaseOn;
        this.resizeAuto = resizeAuto;
        this.resizeDelay = resizeDelay;

        this.init();
    }

    init() {
        this.initDomHandler();
        // 绘制
        this.calcRate();
        if (this.resizeAuto) {
            // 改变窗口大小重新绘制
            window.addEventListener("resize", ()=>{
                console.log(1)
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    // this.resize.bind(this)
                    this.resize();
                }, this.resizeDelay);

            });
        }
    }

    initDomHandler() {
        let db = document.querySelector(this.el);
        db.style.width = `${this.baseWidth}px`;
        db.style.height = `${this.baseHeight}px`;

        // 初始化el样式
        const elDefaultStyle = (this.useZoom ? {
            transition: `all ${this.transition}s`,
            position: 'absolute',
            left: '50%',
            top: '50%',
        } : {
            position: 'absolute',
            left: '50%',
            top: '50%',
            transformOrigin: 'left top 0px',
            transition: `all ${this.transition}s`,
        })

        for (let key in elDefaultStyle) {
            db.style[key] = elDefaultStyle[key];
        }
        this.db = db;
    }

    calcRate() {
        const realWidth = document.documentElement.clientWidth;
        const realHeight = document.documentElement.clientWidth;
        // const realWidth = window.innerWidth; 
        // const realHeight = window.innerHeight;
        let baseRate = (this.baseWidth / this.baseHeight).toFixed(6);
        let currentRate = (realWidth / realHeight).toFixed(6);
        let db = this.db;
        if (db) {
            if (this.scaleBaseOn === 'width') {
                // 以宽度作为缩放基准
                this.scaleCoeff = (realWidth / this.baseWidth).toFixed(6);
            } else if (this.scaleBaseOn === 'height') {
                // 以高度作为缩放基准
                this.scaleCoeff = (window.innerHeight / this.baseHeight).toFixed(6);
                db.style.left = `0`;
            } else {
                // 自动计算宽高比适配
                if (currentRate > baseRate) {
                    // 以高为准
                    this.scaleCoeff = (realHeight / this.baseHeight).toFixed(6);
                } else {
                    // 以宽为准
                    this.scaleCoeff = (realWidth / this.baseWidth).toFixed(6);
                }
            }

            if (this.useZoom) {
                db.style.zoom = this.scaleCoeff;
                db.style.transform = `translate(-50%,-50%)`;
            } else {
                db.style.transform = `scale(${this.scaleCoeff}) translate(-50%, -50%)`;
                if (parseFloat(db.style.left) === 0) {
                    db.style.transform = `scale(${this.scaleCoeff}) translateY(-50%)`;
                }
            }
            setTimeout(() => {
                window.scrollTo(0, 0)
            }, this.resizeDelay + 100)
        }
    }

    resize() {
        this.calcRate()
    }
}

export default BigScreen;
